<template>
  <div class="dialog-wrapper">
    <el-dialog v-if="visible" top="5vh" :visible.sync="visible" width="1238px" :before-close="handleClose">
      <template slot="title">
        <div class="top-nav">
          <div class="title-name">
            {{ selectedRow.personName || selectedRow.personId }}的任务详情
          </div>
          <el-tabs v-model="activeName" class="tabs">
            <el-tab-pane label="工具库" name="toolsLib"></el-tab-pane>
            <el-tab-pane label="订阅服务" name="subscribeService"></el-tab-pane>
            <el-tab-pane label="顾问服务" name="consultantService"></el-tab-pane>
            <el-tab-pane v-if="showOfflineConf" label="线下登记信息" name="offlineRegisterInfo"></el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <div class="main-wrapper">
        <ToolsLib v-if="activeName === 'toolsLib'" :selectedRow="selectedRow"></ToolsLib>
        <SubscribeService v-if="activeName === 'subscribeService'" :selectedRow="selectedRow"></SubscribeService>
        <ConsultantService v-if="activeName === 'consultantService'" :selectedRow="selectedRow"></ConsultantService>
        <OfflineRegisterInfo v-if="activeName === 'offlineRegisterInfo'" :selectedRow="selectedRow"
          :configObj="configObj"></OfflineRegisterInfo>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { offlineConf } from "@/api/index";
export default {
  name: "TaskDetailDialog",
  components: {
    ToolsLib: () => import("./ToolsLib/index.vue"),
    SubscribeService: () => import("./SubscribeService/index.vue"),
    ConsultantService: () => import("./ConsultantService/index.vue"),
    OfflineRegisterInfo: () => import("./OfflineRegisterInfo/index.vue"),
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    selectedRow: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.offlineConfFn();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      activeName: "toolsLib",
      AppKey: sessionStorage.getItem("AppKey"),
      configObj: {},
      showOfflineConf: false,
    };
  },

  created() {},
  mounted() {},
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    // 任务详情弹窗线下服务信息tab的显示与配置
    async offlineConfFn() {
      const params = {
        cardType: this.selectedRow.cardType,
      };
      const res = await offlineConf(params);
      if (res.code == 200 && res.data.length > 0) {
        this.showOfflineConf = true;
        this.configObj = res.data[0];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  ::v-deep .el-dialog__header {
    padding: 0;
    margin: 0;
  }
  .top-nav {
    display: flex;
    align-items: center;
    .title-name {
      margin-left: 16px;
      margin-right: 16px;
      font-size: 16px;
      color: #555;
      width: 232px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .tabs {
      ::v-deep .el-tabs__header {
        margin: 0;
        border-bottom: none;
      }
      ::v-deep .el-tabs__header .el-tabs__nav-wrap {
        padding: 0;
      }
      ::v-deep .el-tabs__header .el-tabs__nav-wrap .el-tabs__item {
        padding: 10px 20px;
        font-size: 16px;
        color: #999;
      }
      ::v-deep .el-tabs__header .el-tabs__nav-wrap .el-tabs__item.is-active {
        color: #7052ff;
        font-weight: 600;
      }
      ::v-deep .el-tabs__active-bar {
        background: transparent;
      }
      ::v-deep .el-tabs__nav-wrap::after {
        background-color: transparent;
      }
    }
  }

  .main-wrapper {
    width: 1238px;
    height: 686px;
    display: flex;
    // padding-top: 12px;
    flex: 1;
    background: url("../../../assets/images/taskDetailBg@3x.png") no-repeat;
    background-size: 101% 35%;
  }
}

::v-deep .el-dialog__body {
  padding: 0 !important;
  border-radius: 0px 8px 8px 0px;
}
</style>
